<template>
  <el-dialog
    class="custom-dialog"
    v-model="dialogVisible"
    title="预约详情"
    width="600px"
    @close="handleClose"
  >
    <div class="custom-detail">
      <div class="title">访问事由</div>
      <el-row :gutter="20">
        <el-col :span="12">
          <span class="label">访问单位:</span>
          <span class="value">{{ form.visitedUnitName }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">访问部门:</span>
          <span class="value">{{ form.visitedDepartName }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">访问人员:</span>
          <span class="value">{{ form.visitedUserName }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">访问区域:</span>
          <span class="value">{{ form.visitedRegionName }}</span>
        </el-col>
        <el-col :span="24">
          <span class="label">预约时段:</span>
          <span class="value">{{ form.startTime }} - {{ form.endTime }}</span>
        </el-col>
        <el-col :span="24">
          <span class="label">事由:</span>
          <span class="value">{{ form.reason }}</span>
        </el-col>
      </el-row>
      <div class="title">访客信息</div>
      <el-row :gutter="20">
        <el-col :span="12">
          <span class="label">访客姓名:</span>
          <span class="value">{{ form.name }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">联系方式:</span>
          <span class="value">{{ form.phone }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">身份证号:</span>
          <span class="value">{{ form.idCard }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">车牌号码:</span>
          <span class="value">{{ form.carNumber }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">访客单位:</span>
          <span class="value">{{ form.unitName }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">访客职务:</span>
          <span class="value">{{ form.postName }}</span>
        </el-col>
        <el-col :span="24">
          <span class="label">人脸照片:</span>
          <span class="value"
            ><el-image
              class="value-img"
              fit="cover"
              :preview-src-list="[form.faceUrl]"
              preview-teleported
              :src="form.faceUrl"
          /></span>
        </el-col>
        <el-col :span="24">
          <span class="label">访客签名:</span>
          <span class="value"
            ><el-image
              class="value-img"
              fit="cover"
              :preview-src-list="[form.signUrl]"
              preview-teleported
              :src="form.signUrl"
          /></span>
        </el-col>
      </el-row>
      <div class="title">随行人员</div>
      <el-row :gutter="20">
        <el-col
          :span="12"
          v-for="(item, index) of form.visitorAppointmentRelList"
          :key="index"
        >
          <div class="person">
            <el-row>
              <el-col :span="24">
                <span class="label">访客姓名:</span>
                <span class="value">{{ item.name }}</span>
              </el-col>
              <el-col :span="24">
                <span class="label">人脸照片:</span>
                <span class="value"
                  ><el-image
                    class="value-img"
                    fit="cover"
                    :preview-src-list="[item.faceUrl]"
                    preview-teleported
                    :src="item.faceUrl"
                /></span>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <div class="title">审核结果</div>
      <el-row :gutter="20">
        <el-col :span="12">
          <span class="label">审核结果:</span>
          <span class="value">{{
            getDictValue('reservationExamineStatus', form.status)
          }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">审核意见:</span>
          <span class="value">{{ form.applyCause }}</span>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>
<script setup>
import { ref, watch } from 'vue'
import FileList from '@/components/fileList/index.vue'
import { reservationRecordDetail } from '@/api/manager/visitorManage/reservationRecord.js'
import { useDict } from '@/hooks/useDict'
const {
  dictOptions,
  initListDictOptions,
  initTreeDictOptions,
  getDictValue,
  getDictStyle,
} = useDict()
const props = defineProps({
  detail: {
    type: Object,
    default: () => {},
  },
})
watch(
  () => props.detail,
  async () => {
    if (props.detail.pkid) {
      handleDetail()
    }
  },
)
const emit = defineEmits(['close'])
const dialogVisible = ref(false)
const handleClose = () => {
  dialogVisible.value = false
  emit('close')
}
const form = ref({
  personList: [{}, {}],
})
const handleDetail = async () => {
  const res = await reservationRecordDetail({ pkid: props.detail.pkid })
  if (res.success) {
    form.value = { ...res.data }
  } else {
    ElMessage.error(res.message)
  }
}
defineExpose({ dialogVisible })
</script>
<style lang="scss" scoped>
.title {
  width: 100%;
  padding: 0 0 5px 15px;
  font-size: 14px;
  line-height: 14px;
  font-weight: 400;
  color: #151515;
  position: relative;
  margin-bottom: 10px;
  &::before {
    content: ' ';
    position: absolute;
    width: 4px;
    height: 16px;
    background: linear-gradient(0deg, #4575ee 0%, #6297f5 100%);
    border-radius: 2px;
    top: 0px;
    left: 0px;
  }
  .el-button {
    margin-left: 10px;
  }
}
.person {
  width: 100%;
  background-color: aliceblue;
  padding: 20px;
  box-sizing: border-box;
}
.value-img {
  width: 80px;
  height: 50px;
}
.value {
  word-break: break-all;
}
</style>
